<template>
    <div class="map-loading" v-if="loading">
        <div class="map-loading-content">
            <img class="map-loading-content-map" src="./mapLoading.svg" alt="">
            <img class="map-loading-content-bg" src="./mapBgLoading.svg" alt="">
        </div>
    </div>
</template>

<script>
    import anime from 'anime'
    export default {
        name: "index",
        data() {
            return {
                loading: true,

            }
        },
        methods: {
            showLoading() {
                this.loading = true;
            },
            hideMapLoading() {
                let tl = anime.timeline({
                    easing: 'easeInOutQuad',
                    duration: 450,
                });
                tl.add({
                    targets: '.map-loading .map-loading-content',
                    scale: 0,
                }).add({
                    targets: '.map-loading',
                    opacity: 0,
                }, 200)
                tl.finished.then(() => {
                    this.loading = false;
                })
            }
        }
    }
</script>

<style scoped lang="less">
.map-loading{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    z-index: 9;
    &-content{
        position: relative;
        &-map{
            position: absolute;
            width: 50px;
            height: 50px;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            z-index: 2;
        }
        &-bg{
            width: 100px;
            height: 100px;
            background: transparent;
            position: relative;
            z-index: 1;
        }
    }
}
</style>